import React, { Component } from "react";

import echarts from "echarts";

const option = {
    title: {
        text: "天气情况统计",
        subtext: "虚构数据",
        left: "center",
    },
    tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    legend: {
        // orient: 'vertical',
        // top: 'middle',
        bottom: 10,
        left: "center",
        data: ["西凉", "益州", "兖州", "荆州", "幽州"],
    },
    series: [
        {
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: [
                {
                    value: 1543,
                    name: "幽州",
                },
                { value: 535, name: "荆州" },
                { value: 510, name: "兖州" },
                { value: 634, name: "益州" },
                { value: 735, name: "西凉" },
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                },
            },
        },
    ],
};

class Dashboard extends Component {
    componentDidMount() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("main"));
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    render() {
        return (
            <div className="dashboard">
                {/* 为 ECharts 准备一个具备大小（宽高）的 DOM */}
                <div
                    id="main"
                    style={{ width: "600px", height: "400px" }}
                ></div>
            </div>
        );
    }
}

export default Dashboard;
